<template>
  <span class="screenshot">
    <el-tooltip class="item" effect="dark" content="批量上传" placement="left">
      <el-button
        @click="showDialog"
        type="primary"
        icon="el-icon-upload2"
        circle
      ></el-button>
    </el-tooltip>
    <el-dialog
      modal-append-to-body
      append-to-body
      title="批量上传"
      top="150px"
      :visible.sync="box"
      width="800px"
      ><el-row :gutter="10">
        <el-col>
          <el-alert title="格式要求" type="warning" :closable="false">
            &nbsp;&nbsp;&nbsp;&nbsp;批量上传只支持zip格式的压缩文件,excel文件(xls,xlsx)为数据文件,其它格式文件将识为附件,系统会根据数据文件内容存储到学生名下.
            <ol>
              <li>excel文件命名规则: 学校名称 - 年级 - 学期</li>
              <li>excel内sheet名称规则: 班级名称</li>
            </ol>
            注:学校名称,年级,学期,班级名称必须与系统内登记完全一致,否则系统将不予处理.
            <p>
              <el-link type="primary">教师用户批量导入模板</el-link>,
              <el-link type="primary">新生学籍档案模板</el-link>,
              <el-link type="primary">成绩模板</el-link>,
              <el-link type="primary">体质达标情况</el-link>
            </p>
          </el-alert>
        </el-col>
        <el-col>
          <el-upload
            ref="upload"
            action="/szpj/file/upload"
            :multiple="true"
            :headers="headers"
            :data="form"
            :show-file-list="true"
            :on-success="onSuccess"
            ><el-button slot="trigger" size="small" type="primary"
              >文件上传</el-button
            >
          </el-upload>
        </el-col>
      </el-row>

      <div slot="footer" class="screenshot__menu">
        <el-button type="primary" icon="el-icon-check" @click="handleSubmit">{{
          $t("submit")
        }}</el-button>
      </div>
    </el-dialog>
  </span>
</template>

<script>
import { saveImport } from "@/views/szpj/file/api";
import { getToken } from "@/util/auth";
import { mapState } from "vuex";
export default {
  name: "zpBatchUpload",
  data() {
    return {
      box: false,
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  computed: {
    ...mapState({
      stateSchoolId: (state) => state.common.homePage.schoolId,
    }),
    form() {
      return {
        schoolId: this.stateSchoolId,
      };
    },
  },
  methods: {
    showDialog() {
      this.box = true;
    },
    onSuccess(response, file, fileList){
      this.fileList.push(response.data)
    },
    handleSubmit() {
      this.box = false;
      saveImport(this.fileList).then((response) => {
        this.$message.success("反馈提交成功");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.screenshot {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 2048;
  &__img {
    min-height: 200px;
    margin-top: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid #eee;
    width: 100%;
  }
  &__menu {
    text-align: center;
  }
}
</style>
